<template>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a-select style="width: 140px" v-model="param.timeSlot" @change="timeSlotChange">
                <a-select-option value="week">最近七天</a-select-option>
                <a-select-option value="month">最近三十日</a-select-option>
                <a-select-option value="quarter">最近三个月</a-select-option>
                <a-select-option value="custom">自定义</a-select-option>
              </a-select>
            </div>
            <a-range-picker :style="{width: '256px'}"
                            @change="dateChange"
                            v-model="param.date"
                            format="YYYY-MM-DD"
                            :disabledDate="disabledDate"
            />
          </div>
          <a-tab-pane loading="true" tab="用户自测" key="1">
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading">

              <span slot="delFlag" slot-scope="text">
                <a-tag v-if="text == 0" color="red">未读</a-tag>
                <a-tag v-else color="#dddddd">已读</a-tag>
              </span>

        <span slot="action" slot-scope="text, record">
          <a v-if="record.delFlag == 0" @click="readPaper(1,record.id)">设为已读</a>
          <a v-else @click="readPaper(0,record.id)">取消已读</a>
          <a-divider type="" />
          <a  @click="toPaperDetail(record)">详情</a>
        </span>

            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>


      <a-modal
        max-height="100vh"
        width="800px"
        title="自测结果"
        v-model="resultView"
        :footer="null">
        <div class="qn-body padding">

          <div class="shadow">
            <div class="header">
              <div class="title">{{selfTest.paperName||"无"}}</div>
              <div class="text-left flex detail">
                <div class="flex-sub"></div> <div class="text-left" style="min-width: 100px">姓名：{{selfTest.username}}</div>
              </div>
              <div class="text-left flex detail">
                <div class="flex-sub"></div> <div class="text-left" style="min-width: 100px">电话：{{selfTest.phone}}</div>
              </div>


            </div>
            <div class="text-left bg-white" style="font-size: 16px">
              <div v-for="(item,index) in subject" :key="index">
                <div class="padding-bottom-sm">{{index+1}}、{{item.paperKey}}</div>

                <div style="text-indent: 32px">{{item.paperValue}}</div>
                <br />
              </div>
            </div>
          </div>

        </div>

      </a-modal>


    </a-card>
  <!-- table区域-end -->
</template>

<script>
  import { filterObj } from '@/utils/util';
  import { pageList, months } from '../../utils/enum'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import moment from 'moment'


  function sortBy(attr, rev) {
    //第二个参数没有传递 默认升序排列
    if (rev == undefined) {
      rev = 1
    } else {
      rev = (rev) ? 1 : -1
    }
    return function(a, b) {
      a = a[attr]
      b = b[attr]
      if (a < b) {
        return rev * -1
      }
      if (a > b) {
        return rev * 1
      }
      return 0
    }
  }


  let that
  export default {
    name: 'CeoPaperList',
    components: {
      RankList,
      Bar
    },
    data() {
      return {
        resultView:false,
        loading: false,
        monthList: months,
        pageList: pageList,
        description: '用户自测数据',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '姓名',
            align: 'center',
            dataIndex: 'username',
            customRender: function(t) {
              return t||"未知"
            }
          },
          {
            title: '电话',
            align: 'center',
            dataIndex: 'phone'
          },
          {
            title: 'ip',
            align: 'center',
            dataIndex: 'ip'
          },
          {
            title: '事件名称',
            align: 'center',
            dataIndex: 'paperName'
          },
          {
            title: '自测时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '状态',
            align: 'center',
            dataIndex: 'delFlag',
            scopedSlots: { customRender: 'delFlag' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        dataSource: [],
        param: {
          timeSlot: 'week',
          date: []
        },
        rankList: [],
        barData: [],
        queryParam: {},
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        selfTest:{},
        subject:[]
      }
    },
    created() {
      that = this

      that.initParam()
    },
    computed: {
    },
    methods: {
      /**
       * 初始化相关参数
       */
      initParam() {

        //初始化时间设置
        that.setParamDate()
      },
      /**
       * 禁止选择的时间段
       */
      disabledDate(current) {
        return current < moment(that.$getDate({ date: new Date(2020, 0, 0) })).endOf('day') || current > moment().endOf('day')
      },
      /**
       * 新增用户数的时间段改变
       */
      timeSlotChange(e) {
        that.setParamDate(e)
      },
      dateChange(e) {
        that.param.timeSlot = 'custom'
        that.getDataSource(1)
      },
      setParamDate(key) {
        let times = 3600 * 24 * 1000 * 7
        switch (key) {
          case 'week':
            times = 3600 * 24 * 1000 * 7
            break
          case 'month':
            times = 3600 * 24 * 1000 * 30
            break
          case 'quarter':
            times = 3600 * 24 * 1000 * 90
            break
          case 'custom':
            return false
            break
          default:
            times = 3600 * 24 * 1000 * 7
            break
        }
        let data = that.$getDate({})
        let data1 = that.$getDate({ date: new Date(new Date().getTime() - times) })
        that.param.date = [moment(data1), moment(data)]
        that.getDataSource(1)
      },


      readPaper(num,id){
        that.loading = true;
        that.$Request({
          url: "/ceo/ceoPaper/hasRead",
          params: {deleteFlag:num,pId:id},
        }).then(res => {
          that.getDataSource();
        }).catch(res => {
          if (!res) {
            res = '操作失败'
          }
          that.$message.warning(res)
        }).finally(() => {
          that.loading = false
        })
      },

      getDataSource(arg) {
        that.loading = true
        let start = moment(that.param.date[0]).format('YYYY-MM-DD')
        let end = moment(that.param.date[1]).format('YYYY-MM-DD')
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        let params = that.getQueryParams();
        params["start"] = start;
        params["end"] = end;
        that.$Request({
          url: "/ceo/ceoPaper/paperList",
          params: params
        }).then(res => {
          that.dataSource = res.result.records;
          that.ipagination.total = res.result.total;
        }).catch(res => {
          if (!res) {
            res = '数据加载失败'
          }
          that.$message.warning(res)
        }).finally(() => {
          that.loading = false
        })
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        //TODO 字段权限控制
        var str = "id,";
        this.columns.forEach(function (value) {
          str += "," + value.dataIndex;
        });
        return str;
      },

      /**
       * 去详情
       */
      toPaperDetail(obj){
        that.$Request({
          url: "/ceo/ceoPaper/paperWithAnswers",
          params:{
            pId:obj.id
          }
        }).then(res=>{
          that.selfTest = obj;
          that.subject = res.result;
          that.resultView = true;
        }).catch(res=>{
          if(!res.message){
            res.message = "加载失败"
          }
          that.$message.warning(res.message)
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'


  .qn-body {
    margin: 0 auto;
    width: 75rem;
    border-radius: 10px;
  }

  .main{
    padding: 50px 5px 5px 50px;
  }

  .shadow {
    box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.2);
  }

  .padding {
    padding: 30rpx;
  }

  .margin-tb {
    margin: 0;
  }

  .button-padding {
    padding: 30rpx;
  }

  .head{

    height: 50px;
  }

  .header {
    padding: 20px;
    height:100%;
    text-align: center;
  }

  .header>.title {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
  }

  .header>.detail {
    font-size: 16px;
    color: #555555;
  }

  .bg-white {
    background-color: #fff !important;
  }

  @media screen and (min-width: 800px) {
    .margin-tb {
      margin: 30rpx 0;
    }

    .button-padding {
      padding: 30px 30rpx;
    }
  }
</style>
<style lang="scss" scoped>
  .circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
  }

  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }

    p {
      line-height: 42px;
      margin: 0;

      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>